<template>
  <router-view v-slot="{ Component }">
    <transition :name="transitionName">
      <keep-alive :exclude="store.excludeNames">
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
  <Call />
</template>
<script setup lang="ts">
/*
* try {navigator.control.gesture(false);} catch (e) {} //UC浏览器关闭默认手势事件
try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出菜单
* */
import routes from './router/routes'
import Call from './components/Call.vue'
import { useBaseStore } from '@/store/pinia.js'
import { onMounted, ref, watch, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import BaseMask from '@/components/BaseMask.vue'
import { BASE_URL } from '@/config'

const store = useBaseStore()
const route = useRoute()
const transitionName = ref('go')

// watch $route 决定使用哪种过渡
watch(
  () => route.path,
  (to, from) => {
    store.setMaskDialog({ state: false, mode: store.maskDialogMode })
    //底部tab的按钮，跳转是不需要用动画的
    let noAnimation = [
      '/',
      '/home',
      '/slide',
      '/me',
      '/shop',
      '/message',
      '/publish',
      '/home/live',
      'slide',
      '/test'
    ]
    if (noAnimation.indexOf(from) !== -1 && noAnimation.indexOf(to) !== -1) {
      return (transitionName.value = '')
    }
    const toDepth = routes.findIndex((v: RouteRecordRaw) => v.path === to)
    const fromDepth = routes.findIndex((v: RouteRecordRaw) => v.path === from)
    transitionName.value = toDepth > fromDepth ? 'go' : 'back'
  }
)

function resetVhAndPx() {
  let vh = window.innerHeight * 0.01
  document.documentElement.style.setProperty('--vh', `${vh}px`)
  //document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 + 'px'
}

const instance = getCurrentInstance();
const { V8 } = instance.appContext.config.globalProperties;
function SetSafeAreaBgColor(color){
  try  {
    const Color = plus.android.importClass('android.graphics.Color')  
    plus.android.importClass('android.view.Window')  
    const mainActivity = plus.android.runtimeMainActivity()  
    const window_android = mainActivity.getWindow()  
    if(color){
      window_android.setNavigationBarColor(Color.WHITE) // Color.BLACK 黑色 Color.WHITE 白色
    }else{
      window_android.setNavigationBarColor(Color.BLACK) // Color.BLACK 黑色 Color.WHITE 白色
    }
  } catch (error) {
  }
}
onMounted(() => {
  store.init()
  resetVhAndPx()
  // 监听resize事件 视图大小发生变化就重新计算1vh的值
  window.addEventListener('resize', () => {
    location.href = BASE_URL + '/'
    resetVhAndPx()
  })
  V8.Init();
  // console.log('app.vue store', store)
  try {
    document.addEventListener('plusready', () => {
      //获取安全区域
      const insets = plus.navigator.getSafeAreaInsets();
      window.isMuted = false;
      store.DefaultIsMuted = false;
      store.SafeArea = {
        Top: insets.top + 'px',
        Bottom: insets.bottom + 'px'
      };
      var height = plus.navigator.getStatusbarHeight();
      if(height){
        store.SafeArea.Top = height + 'px';
      }
      //设置安全区域颜色
      SetSafeAreaBgColor(0);
      //以下代码放在这里无效，放在index.html就有效
      var webview = plus.webview.currentWebview();
      var first = null;
      plus.key.addEventListener('backbutton', function() {
        webview.canBack(function(e) {
          if (e.canBack) {
            // V8.Tips('后退页面');
            webview.back();
          } else {
            if (!first) {
              first = new Date().getTime();
              console.log('再按一次退出应用');
              V8.Tips('再按一次退出应用');
              setTimeout(function() {
                first = null;
              }, 1000);
            } else {
                plus.runtime.quit();
            }
          }
        })
      });
    });
  } catch (error) {
  }
})
</script>

<style lang="less">
@import './assets/less/index';

* {
  user-select: none;
}

#app {
  height: 100%;
  width: 100%;
  position: relative;
  font-size: 14rem;
}

@media screen and (min-width: 500px) {
  #app {
    width: 500px !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

.go-enter-from {
  transform: translate3d(100%, 0, 0);
}

//最终状态
.back-enter-to,
.back-enter-from,
.go-enter-to,
.go-leave-from {
  transform: translate3d(0, 0, 0);
}

.go-leave-to {
  transform: translate3d(-100%, 0, 0);
}

.go-enter-active,
.go-leave-active,
.back-enter-active,
.back-leave-active {
  transition: all 0.3s;
}

.back-enter-from {
  transform: translate3d(-100%, 0, 0);
}

.back-leave-to {
  transform: translate3d(100%, 0, 0);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
